<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>form表单的验证</title>
		<!---引入jquery源码--->
		<script type="text/javascript" src="jquery-1.11.3/jquery-1.11.3.min.js" ></script>
		<script type="text/javascript">
			// 验证函数：如果返回false 则可以阻止表单向服务器发送请求；
			// 反之，如果返回true，则允许向服务器发送请求
			function doCheck() {
				// 所有验证是否全部通过标识
				var isOK = true;
				// 验证用户名不能为空
				// 获取用户名控件对象
				var strName = $("#txtName").val();
				//console.info("strname：：："+strName);
				// 验证不通过
				if(strName == null || strName == "") {
					// 显示提示信息
					$("#txtNameMsg").html("请输入用户名");
					// 修改验证通过标识
					isOK = false;
				} else {
					// 验证通过
					$("#txtNameMsg").html("");
				}
				// 验证密码不能为空
				// 获取密码控件对象
				var strtxtPsw = $("#txtPsw").val();
				// 验证不通过
				if(strtxtPsw == null || strtxtPsw == "") {
					// 显示提示信息
					$("#txtPswMsg").html("请输入密码");
					// 修改验证通过标识
					isOK = false;
				} else {
					// 验证通过
					$("#txtPswMsg").html("");
				}

				// 邮箱的非空验证
				// 获取用户名控件对象
				var txtMail = $("#txtMail").val();
				// 验证不通过
				if(txtMail == null || txtMail == "") {
					// 显示提示信息
					$("#txtMailMsg").html("请输入邮箱名");
					// 修改验证通过标识
					isOK = false;
				} else {
					// 邮箱不为空时，进行邮箱的合法性验证
					// 使用正则表达式验证邮箱的合法性
					// 创建一个js中的正则表达式对象
					var regMail = /^\w+@\w+.[A-Za-z]{2,3}(.[A-Za-z]{2,3})?$/;
					if(regMail.test(txtMail)) {
						// 验证通过
						$("#txtMailMsg").html("");
					} else {
						// 验证不通过
						// 显示提示信息
						$("#txtMailMsg").html("邮箱名不合法，请重新输入");
						// 清空重新输入
						$("#txtMailMsg").val("");
						// 修改验证通过标识
						isOK = false;
					}
				}

				// 验证性别				
				// 判定是否进行选择
				// jquery选择已经选择的单选框对象
				//console.info($("input[name='txtSex']:checked"));
				if($("input[name='txtSex']:checked").length == 0) {
					// 显示提示信息
					$("#txtSexMsg").html("请选择性别");
					// 修改验证通过标识
					isOK = false;
				} else {
					// 验证通过
					$("#txtSexMsg").html("");
				}

				// 验证专业
				var selectMajer = $("#selectMajer").val();
				// 验证不通过
				if(selectMajer == null || selectMajer == "") {
					// 显示提示信息
					$("#selectMajerMsg").html("请选择专业");
					// 修改验证通过标识
					isOK = false;
				} else {
					// 验证通过
					$("#selectMajerMsg").html("");
				}

				// 验证兴趣				
				// 判定是否进行选择
				if($("input[name='txtHobby']:checked").length == 0) {
					// 显示提示信息
					$("#txtHobbyMsg").html("请至少选择一项兴趣爱好");
					// 修改验证通过标识
					isOK = false;
				} else {
					$("#txtHobbyMsg").html("");
				}

				return isOK;
			}
		</script>
	</head>

	<body>
		<!--from表单时用于向数据库发送数据的载体空间，也就是，只有写在form表单中的控件的值才会被打包发送服务器-->
		<form action="#" method="get">
			<table width="600px" align="center" border="1px" cellpadding="0" cellspacing="0" bordercolor="#E6E6E6">
				<tr align="center">
					<td width="20%">用户名</td>
					<td width="50%"><input type="text" id="txtName" name="txtName" /></td>
					<td width="30%">
						<font id="txtNameMsg" color="red"></font>
					</td>
				</tr>
				<tr align="center">
					<td width="20%">密码</td>
					<td width="50%"><input type="password" id="txtPsw" name="txtPsw" /></td>
					<td width="30%">
						<font id="txtPswMsg" color="red"></font>
					</td>
				</tr>
				<tr align="center">
					<td width="20%">邮箱</td>
					<td width="50%"><input type="text" id="txtMail" name="txtMail" /></td>
					<td width="30%">
						<font id="txtMailMsg" color="red"></font>
					</td>
				</tr>
				<tr align="center">
					<td width="20%">性别</td>
					<!--一组单选框要求所有的单选框的控件的name属性一样---->
					<td width="50%">女<input type="radio" id="txtSexFemale" name="txtSex" /> 男
						<input type="radio" id="txtSexMale" name="txtSex" /></td>
					<td width="30%">
						<font id="txtSexMsg" color="red"></font>
					</td>
				</tr>
				<tr align="center">
					<td width="20%">专业</td>
					<td width="50%">
						<select id="selectMajer" name="selectMajer">
							<option value=""></option>
							<option value="cs">计算机</option>
							<option value="fc">金融</option>
							<option value="ec">电信</option>
						</select>
					</td>
					<td width="30%">
						<font id="selectMajerMsg" color="red"></font>
					</td>
				</tr>
				<tr align="center">
					<td width="20%">兴趣</td>
					<!--一组多选框要求所有的多选框的控件的name属性一样---->
					<td width="50%">游戏<input type="checkbox" id="txtHobby1" name="txtHobby" /> 足球
						<input type="checkbox" id="txtHobby2" name="txtHobby" /> 驴友
						<input type="checkbox" id="txtHobby3" name="txtHobby" />
					</td>
					<td width="30%">
						<font id="txtHobbyMsg" color="red"></font>
					</td>
				</tr>
				<tr align="center">
					<td width="20%">自我介绍</td>
					<td width="50%">
						<textarea rows="10" cols="30" maxlength="300" id="txtbio" name="txtbio">
							这里写个人介绍。。。
						</textarea>
					</td>
					<td width="30%"></td>
				</tr>
				<tr align="center">
					<td width="20%">头像</td>
					<td width="50%"><input type="file" id="txtImg" name="txtImg" /></td>
					<td width="30%"></td>
				</tr>
				<tr align="center">
					<td colspan="2" align="center">
						<input type="submit" value="提交" onclick="return doCheck();" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="reset" value="重置" />
					</td>
				</tr>
			</table>

		</form>
	</body>

</html>